"use client"

import { useState, useEffect } from "react"
import {
  Row,
  Col,
  Card,
  Statistic,
  Progress,
  Table,
  Tag,
  Spin,
  Typography,
  Button,
} from "antd"
import {
  UserOutlined,
  CalendarOutlined,
  DollarOutlined,
  TeamOutlined,
  ArrowUpOutlined,
} from "@ant-design/icons"
// 移除直接axios导入，改为导入api函数
import { getDashboardStatistics, getRecentEvents } from "@/utils/api/dashboard"
import "./Dashboard.less"

const { Title } = Typography

const Dashboard = () => {
  const [loading, setLoading] = useState(true)
  const [statistics, setStatistics] = useState(null)
  const [recentEvents, setRecentEvents] = useState([])

  useEffect(() => {
    // 获取仪表盘数据
    const fetchDashboardData = async () => {
      try {
        setLoading(true)
        // 使用Promise.all同时调用两个API函数
        const [statsData, eventsData] = await Promise.all([
          getDashboardStatistics(),
          getRecentEvents(),
        ])

        setStatistics(statsData)
        setRecentEvents(eventsData)
      } catch (error) {
        console.error("获取仪表盘数据出错:", error)
      } finally {
        setLoading(false)
      }
    }

    fetchDashboardData()
  }, [])

  const recentEventsColumns = [
    {
      title: "婚礼名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "客户姓名",
      dataIndex: "customer",
      key: "customer",
    },
    {
      title: "日期",
      dataIndex: "date",
      key: "date",
    },
    {
      title: "地点",
      dataIndex: "venue",
      key: "venue",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      render: (status) => {
        let color = ""
        let text = ""

        switch (status) {
          case "pending":
            color = "gold"
            text = "待确认"
            break
          case "confirmed":
            color = "green"
            text = "已确认"
            break
          case "completed":
            color = "blue"
            text = "已完成"
            break
          case "canceled":
            color = "red"
            text = "已取消"
            break
          default:
            color = "default"
            text = status
        }

        return <Tag color={color}>{text}</Tag>
      },
    },
    {
      title: "操作",
      key: "action",
      render: () => (
        <Button type="link" size="small">
          查看详情
        </Button>
      ),
    },
  ]

  if (loading) {
    return (
      <div className="loading-container">
        <Spin size="large" />
      </div>
    )
  }

  return (
    <div className="dashboard-container">
      <div className="page-header">
        <Title level={4} className="page-title">
          仪表盘
        </Title>
        <p>欢迎回来，这里是您的业务数据概览</p>
      </div>

      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="客户总数"
              value={statistics?.totalCustomers || 0}
              prefix={<UserOutlined />}
            />
            <div className="stat-footer">
              <span className="stat-increase">
                <ArrowUpOutlined /> 16%
              </span>
              <span className="stat-period">较上月</span>
            </div>
          </Card>
        </Col>

        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="本月婚礼"
              value={statistics?.monthlyEvents || 0}
              prefix={<CalendarOutlined />}
            />
            <div className="stat-footer">
              <span className="stat-increase">
                <ArrowUpOutlined /> 8%
              </span>
              <span className="stat-period">较上月</span>
            </div>
          </Card>
        </Col>

        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="月收入(万元)"
              value={statistics?.monthlyRevenue || 0}
              precision={2}
              prefix={<DollarOutlined />}
            />
            <div className="stat-footer">
              <span className="stat-increase">
                <ArrowUpOutlined /> 12%
              </span>
              <span className="stat-period">较上月</span>
            </div>
          </Card>
        </Col>

        <Col xs={24} sm={12} md={6}>
          <Card>
            <Statistic
              title="员工总数"
              value={statistics?.totalStaff || 0}
              prefix={<TeamOutlined />}
            />
            <div className="stat-footer">
              <span className="stat-increase">
                <ArrowUpOutlined /> 5%
              </span>
              <span className="stat-period">较上月</span>
            </div>
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: "24px" }}>
        <Col xs={24} md={12}>
          <Card title="本月业绩完成度" className="progress-card">
            <div className="progress-item">
              <div className="progress-info">
                <span>收入目标</span>
                <span>
                  {statistics?.revenueProgress?.current || 0}/
                  {statistics?.revenueProgress?.target || 0}万元
                </span>
              </div>
              <Progress
                percent={Math.round(
                  ((statistics?.revenueProgress?.current || 0) /
                    (statistics?.revenueProgress?.target || 1)) *
                    100
                )}
                status="active"
                strokeColor="#C13584"
              />
            </div>

            <div className="progress-item">
              <div className="progress-info">
                <span>新客户</span>
                <span>
                  {statistics?.customerProgress?.current || 0}/
                  {statistics?.customerProgress?.target || 0}个
                </span>
              </div>
              <Progress
                percent={Math.round(
                  ((statistics?.customerProgress?.current || 0) /
                    (statistics?.customerProgress?.target || 1)) *
                    100
                )}
                status="active"
                strokeColor="#E1306C"
              />
            </div>

            <div className="progress-item">
              <div className="progress-info">
                <span>婚礼项目</span>
                <span>
                  {statistics?.eventProgress?.current || 0}/
                  {statistics?.eventProgress?.target || 0}个
                </span>
              </div>
              <Progress
                percent={Math.round(
                  ((statistics?.eventProgress?.current || 0) /
                    (statistics?.eventProgress?.target || 1)) *
                    100
                )}
                status="active"
                strokeColor="#F77737"
              />
            </div>
          </Card>
        </Col>

        <Col xs={24} md={12}>
          <Card title="婚礼类型分布" className="chart-card">
            <div className="donut-chart">
              {/* 在实际项目中，您可以使用Echarts或其他图表库来渲染饼图 */}
              <div className="placeholder-chart">
                <div
                  className="chart-segment"
                  style={{
                    transform: "rotate(0deg)",
                    backgroundColor: "#C13584",
                  }}
                ></div>
                <div
                  className="chart-segment"
                  style={{
                    transform: "rotate(90deg)",
                    backgroundColor: "#E1306C",
                  }}
                ></div>
                <div
                  className="chart-segment"
                  style={{
                    transform: "rotate(180deg)",
                    backgroundColor: "#F77737",
                  }}
                ></div>
                <div
                  className="chart-segment"
                  style={{
                    transform: "rotate(270deg)",
                    backgroundColor: "#FCAF45",
                  }}
                ></div>
                <div className="chart-center"></div>
              </div>
              <div className="chart-legend">
                <div className="legend-item">
                  <span
                    className="legend-color"
                    style={{ backgroundColor: "#C13584" }}
                  ></span>
                  <span>豪华婚礼</span>
                </div>
                <div className="legend-item">
                  <span
                    className="legend-color"
                    style={{ backgroundColor: "#E1306C" }}
                  ></span>
                  <span>标准婚礼</span>
                </div>
                <div className="legend-item">
                  <span
                    className="legend-color"
                    style={{ backgroundColor: "#F77737" }}
                  ></span>
                  <span>简约婚礼</span>
                </div>
                <div className="legend-item">
                  <span
                    className="legend-color"
                    style={{ backgroundColor: "#FCAF45" }}
                  ></span>
                  <span>主题婚礼</span>
                </div>
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      <Row style={{ marginTop: "24px" }}>
        <Col span={24}>
          <Card title="近期婚礼活动">
            <Table
              columns={recentEventsColumns}
              dataSource={recentEvents}
              rowKey="id"
              pagination={{ pageSize: 5 }}
            />
          </Card>
        </Col>
      </Row>
    </div>
  )
}

export default Dashboard
